<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Complex Layout</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="ext/ext-all.js">
        </script>
        <script type="text/javascript" src="/buildHtmlCode.js">
        </script>
        <script type="text/javascript">
            var generateIdPrefix = "gen";
            var generateIdCounter = 1;
			var defBackColor = "#EEEEEE";
			var selectedBackColor = "";
            
            Ext.onReady(function(){
                var resultWindow;
                var selectedNode;
                var resultTextArea;
                
                //tree node text
                var treeNodeText = "&lt;layer&gt;";
                
                //property fields
                var width = new Ext.form.TextField({
                    fieldLabel: 'width',
                    id: "width"
                });
                var height = new Ext.form.TextField({
                    fieldLabel: 'height',
                    id: "height"
                });
                var paddingTop = new Ext.form.TextField({
                    fieldLabel: 'paddingTop',
                    id: "paddingTop"
                });
                var paddingBottom = new Ext.form.TextField({
                    fieldLabel: 'paddingBottom',
                    id: "paddingBottom"
                });
                var paddingLeft = new Ext.form.TextField({
                    fieldLabel: 'paddingLeft',
                    id: "paddingLeft"
                });
                var paddingRight = new Ext.form.TextField({
                    fieldLabel: 'paddingRight',
                    id: "paddingRight"
                });
                var direction = new Ext.form.TextField({
                    fieldLabel: 'direction',
                    id: "direction"
                });
                var layerId = new Ext.form.TextField({
                    fieldLabel: 'layerId',
                    id: "layerId"
                });
                width.on("blur", valueChangeHandler);
                height.on("blur", valueChangeHandler);
                paddingTop.on("blur", valueChangeHandler);
                paddingBottom.on("blur", valueChangeHandler);
                paddingLeft.on("blur", valueChangeHandler);
                paddingRight.on("blur", valueChangeHandler);
                direction.on("blur", valueChangeHandler);
                layerId.on("blur", function(e){
                    if (e.getValue() != "") {
                        selectedNode.setText(e.getValue());
                    }
                });
                function valueChangeHandler(e){
                    if (selectedNode) {
                        eval("selectedNode.attributes." + e.fieldLabel + " = e.getValue();")
                        buildLayout();
                    }
                    else {
                        e.setValue("");
                    }
                }
                
                //main layout
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        layout: 'border',
                        region: 'west',
                        width: 200,
                        minSize: 100,
                        maxSize: 400,
                        paddings: '0 0 0 5',
                        items: [{
                            region: 'center',
                            contentEl: 'tree'
                        }, {
                            region: 'south',
                            height: 265,
                            minSize: 175,
                            maxSize: 400,
                            layout: 'fit',
                            paddings: '0 5 0 0',
                            items: new Ext.FormPanel({
                                labelWidth: 86, // label settings here cascade unless overridden
                                frame: true,
                                bodyStyle: 'padding:5px 5px 0',
                                width: 350,
                                defaults: {
                                    width: 75
                                },
                                items: [layerId, width, height, paddingTop, paddingBottom, paddingLeft, paddingRight, direction],
                                buttons: [{
                                    text: 'Show Code',
                                    handler: function(button){
                                        resetVars();
                                        var result = extTreeToHtmlCode(rootNode);
                                        if (resultTextArea) {
                                            resultTextArea.setValue(result);
                                        }
                                        else {
                                            resultTextArea = new Ext.form.TextArea({
                                                value: result
                                            });
                                        }
                                        if (!resultWindow) {
                                            resultWindow = new Ext.Window({
                                                applyTo: 'resultWindow',
                                                layout: 'fit',
                                                width: 500,
                                                height: 300,
                                                closeAction: 'hide',
                                                plain: true,
                                                title: "div layout html code:",
                                                items: resultTextArea
                                            });
                                        }
                                        resultWindow.show(button);
                                    }
                                }]
                            
                            })
                        }]
                    }, {
                        region: 'center',
                        contentEl: 'center'
                    }]
                });
                
                //context menu for tree
                var menu = new Ext.menu.Menu({
                    id: "rightClickCont",
                    items: [{
                        text: "add node",
                        handler: function(e){
                            var eventNode = this.parentMenu.eventNode;
                            var newNode = new Ext.tree.TreeNode({
                                text: generateIdPrefix + generateIdCounter++,
                                expanded: true,
                                leaf: false
                            });
							newNode.attributes.backColor = defBackColor;
                            newNode.on("contextmenu", nodeSelectHanlder);
                            eventNode.appendChild(newNode);
                            buildLayout();
                        }
                    }, {
                        text: "remove node",
                        handler: function(e){
                            var eventNode = this.parentMenu.eventNode;
                            eventNode.remove();
                            buildLayout();
                        }
                    }, {
                        text: "align center",
                        handler: function(e){
                            var eventNode = this.parentMenu.eventNode;
							if(eventNode.attributes.alignCenter){
								eventNode.attributes.alignCenter = false;
							}else{
								eventNode.attributes.alignCenter = true;
							}
                            buildLayout();
                        }
                    }, {
                        text: "backgroud color",
                        menu: {
                            items: [
								new Ext.menu.ColorItem({
									selectHandler:function(cp, color){
										var eventNode = this.parentMenu.parentMenu.eventNode;
										eventNode.attributes.backColor = "#" + color;
										buildLayout();
									}
								})
							]
                        }
                    }]
                });
                
                //tree init
                var tree = new Ext.tree.TreePanel({
                    border: false,
                    selModel: new Ext.tree.DefaultSelectionModel
                });
                var rootNode = new Ext.tree.TreeNode({
                    text: "container",
                    expanded: true,
                    leaf: false
                });
                tree.setRootNode(rootNode);
                tree.render('tree');
                rootNode.on("contextmenu", nodeSelectHanlder);
				rootNode.attributes.backColor = defBackColor;
                tree.getSelectionModel().on('selectionchange', function(selectionModel, node){
                    //select div
                    var ifm = document.getElementById("result").contentWindow.document;
                    var selectedDiv = ifm.getElementById(node.text + wrapperSuffix) || ifm.getElementById(node.text);
                    if (ifm.selectedDiv) {
                        ifm.selectedDiv.style.backgroundColor = ifm.selectedDiv.oldBackColor;
                    }
                    else {
                        ifm.selectedDiv = selectedDiv;
                    }
                    ifm.selectedDiv = selectedDiv;
                    if (selectedDiv) {
						selectedDiv.oldBackColor = selectedDiv.style.backgroundColor;
                        selectedDiv.style.backgroundColor = selectedBackColor;
                    }
                    
                    //change property
                    selectedNode = node;
                    width.setValue(node.attributes.width);
                    height.setValue(node.attributes.height);
                    paddingTop.setValue(node.attributes.paddingTop);
                    paddingBottom.setValue(node.attributes.paddingBottom);
                    paddingLeft.setValue(node.attributes.paddingLeft);
                    paddingRight.setValue(node.attributes.paddingRight);
                    direction.setValue(node.attributes.direction);
                    layerId.setValue(node.text);
                });
                
                function nodeSelectHanlder(node, event){
                    event.preventDefault();
                    menu.eventNode = node;
                    menu.showAt(event.getXY());
                }
                
                //build visual layout
                function buildLayout(){
                    resetVars();
                    var ifm = document.getElementById("result").contentWindow.document;
                    ifm.open();
                    ifm.write(extTreeToHtmlCode(rootNode));
                    ifm.close();
                }
            });
        </script>
    </head>
    <body>
        <div id="west">
            <div id="left">
                <div id="tree"/>
            </div>
        </div>
        <div id="center">
            <iframe id="result" frameborder="no" style="width:100%;height:100%;overflow:auto;">
            </iframe>
            <div id="resultWindow">
            </div>
        </div>
    </body>
</html>
